PywE|Using APIs

Intro

Let's dive into coding a request to an API.

JSON object

When we talked about JSON objects, we were talking about JavaScript Object Notation.

Let's fill out this JSON object so that it makes sense for developers.

{
  "Name": "Josue",
  "Nationality": "Ghanaian"
}

Awesome!

JavaScript

JavaScript is a type of programming language. To keep things simple, we'll learn how to make an API request using JavaScript.

To get started, say you're ready by printing something to the console using JavaScript.

console.log("Are you ready?");
console.log("I'm ready.");

//Output Below

Are you ready?
I'm ready.

Nice!

A new request

The first step is to create a new request using the new keyword.

new

Make sure to spell new.

Creating a request

Although it seems strange, the way to create a new request is using a tool from JavaScript called XMLHttpRequest(). Let's give it a try.

new XMLHttpRequest()

Awesome!

Ending with a semicolon

Finally, each line of JavaScript code ends with a semicolon. Let's add one.

new XMLHttpRequest();

Nice job!

Creating a variable

To make sure we can do different things with the request, let's store it in a variable called request.

var request = new XMLHttpRequest();
console.log(request);

//Output Below

XMLHttpRequest { … }

Awesome work!

URL

Next, we'll need to specify the URL for the request.

Create a variable named URL and set it to Josue's profile on Twitter's developer API.

var request = new XMLHttpRequest();
var url = "https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=josueadimado";

console.log(url);

Nice!

Open

By using request.open(), we can specify the request.

var request = new XMLHttpRequest();
var url = "https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=josueadimado";
 
request.open();

Awesome!

Specify request

Now we need to specify what kind of request we want to make.

Place "GET" between the parentheses to specify the type of request.

var request = new XMLHttpRequest();
var url = "https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=josueadimado";
 
request.open("GET");

Nice work!

Specify URL

Next, specify the URL in the request by adding a comma and using the url variable we created.

var request = new XMLHttpRequest();
var url = "https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=josueadimado";
 
request.open("GET", url);

Neat job!

Waiting for a response

The final part we need to specify is if we want more advanced code that will work better while it waits for a response from the API.

We'll set it to false so we can focus on the basics.

var request = new XMLHttpRequest();
var url = "https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=josueadimado";
 
request.open("GET", url, false);

Nice!

Sending request

Now that the request is open, we can send it using request.send().

var request = new XMLHttpRequest();
var url = "https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=josueadimado";
 
request.open("GET", url, false);
request.send();

Awesome!

Response

The last part is to display the response in a variable on the console. Let's try it with request.responseText.

var request = new XMLHttpRequest();
var url = "https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=josueadimado";
 
request.open("GET", url, false);
console.log(request.response);

//Output Below

[{
    "created_at": "Wed Sep 11 12:52:32 +0000 2019",
    "text": "No more stress. Pharst Care is here to save you the stress of going from pharmacy to pharmacy. ",
    "favorite_count": 1,
    ...
}]

Great work, we just printed the JSON response from an API!

Practice

Let's use a APIs to build a website about cats!

What we'll do

We'll make calls to an API that generates random cat facts.

We'll then format the response, so it's easier to read.

Create a title

Let's get started by creating a nice title.

console.log("Cat Fact");

//Output Below

Cat Fact

Neat!

Create a request variable

Let's create a variable named request to store the value of our request.

console.log("Cat Fact");
 
var request;

//Output Below

Cat Fact

Awesome!

Create the request

Now let's create the actual request.

console.log("Cat Fact");
 
var request = new XMLHttpRequest();

//Output Below

Cat Fact

Nice job!

URL

The URL of the random cat fact generator API is https://cat-fact.herokuapp.com/facts/random.

Let's create a variable called url to store it.

console.log("Cat Fact");

var request = new XMLHttpRequest();
var url = "https://cat-fact.herokuapp.com/facts/random";

Sweet!

Open request

Open the request to get it started.

console.log("Cat Fact");
 
var request = new XMLHttpRequest();
var url = "https://cat-fact.herokuapp.com/facts/random";
 
request.open();

//Output Below

Cat Fact

Sweet!

Specifying open request

Set the type of request, url, and tell the request if we don't want the advanced functionality it has to offer.

console.log("Cat Fact");
 
var request = new XMLHttpRequest();
var url = "https://cat-fact.herokuapp.com/facts/random";
 
request.open("GET", url, false);

//Output Below

Cat Fact

Neat job!

Send the request

Now we can send the request to the API.

console.log("Cat Fact");
 
var request = new XMLHttpRequest();
var url = "https://cat-fact.herokuapp.com/facts/random";
 
request.open("GET", url, false);
request.send();

//Output Below

Cat Fact

Awesome job!

Handling the response

Let's create a response variable for the responseText of the request.

console.log("Cat Fact");
 
var request = new XMLHttpRequest();
var url = "https://cat-fact.herokuapp.com/facts/random";
 
request.open("GET", url, false);
request.send();
 
var response = request.responseText;

//Output Below

Cat Fact

Nice work!

Parse data

Let's create a data variable to format the response as a JSON object.

console.log("Cat Facts");
 
var request = new XMLHttpRequest();
var url = "https://cat-fact.herokuapp.com/facts/random";
 
request.open("GET", url, false);
request.send();
 
var response = request.response;
var data = JSON.parse(response);

Awesome work!

Log the data

Now log the data, so we can find out what's inside!

console.log("Cat Facts");
 
var request = new XMLHttpRequest();
var url = "https://cat-fact.herokuapp.com/facts/random";
 
request.open("GET", url, false);
request.send();
 
var response = request.response;
var data = JSON.parse(response);
  
console.log(data);

//Output Below

{
 "text":"The average cat sleeps between 12-14 hours a day.",
 "createdAt":"2018-01-04T01:10:54.673Z",
 "source":"api"
 ...
}

Sweet!

Logging the cat fact

Knowing what the response looks like, extract the piece of data most important: the text.

{
 "text":"The average cat sleeps between 12-14 hours a day.",
 "createdAt":"2018-01-04T01:10:54.673Z",
 "source":"api"
 ...
}

console.log("Cat Facts");
 
var request = new XMLHttpRequest();
var url = "https://cat-fact.herokuapp.com/facts/random";
 
request.open("GET", url, false);
request.send();
 
var response = request.response;
var data = JSON.parse(response);
  
console.log(data["text"]);

//Output Below

Cat Facts
The average cat sleeps between 12-14 hours a day.

Great job!

Results

Great job! We made a request to an API and displayed data in a very readable way. Just like an app or website.

console.log("Cat Facts");
 
var request = new XMLHttpRequest();
var url = "https://cat-fact.herokuapp.com/facts/random";
 
request.open("GET", url, false);
request.send();
 
var response = request.response;
var data = JSON.parse(response);
  
console.log(data["text"]);

//Output Below

Cat Facts
The average cat sleeps between 12-14 hours a day.